<template>
  <div class="contentTemplate">
    <div class="baseInfo">
      <div class="title rowFlex spaceBetween">
        <span>{{ data.name }}</span>
        <div class="rowFlex allCenter">
          <!-- <el-button type="text" @click="edit(data)">编辑</el-button> -->
          <div
            v-if="data.is_use == 1"
            class="auto"
          >默认模版</div>
          <el-checkbox
            v-if="data.checked"
            v-model="data.checkedValue"
            style="margin:0 10px;"
            @change="radioChange(data)"
          ></el-checkbox>
        </div>
      </div>
      <div class="rowFlex templateList">
        <!-- 手挡 -->
        <div class="template">
          <div class="subTitle">首充档位设置</div>
          <div class="contentList rowFlex flexWarp spaceBetween">
            <div
              v-for="(item,index) in data.first_list"
              :key="index"
              style="position: relative;"
            >
              <div
                v-if="item.product_type == 1"
                class="contentItem  columnFlex allCenter"
              >
                <p class="money">{{ item.amount }}元</p>
                <p class="desc">{{ `${item.coin}喵币 + ${item.free_coin}赠币` }}</p>
              </div>
              <div
                v-else-if="item.product_type > 1 && item.product_type < 9 || item.product_type == 10"
                class="contentItem contentItemActive columnFlex allCenter"
              >
                <p class="money">{{ item.amount }}/{{ item.product_name }}</p>
                <p class="desc">全场剧集免费观看</p>
              </div>
              <div
                v-else-if="item.product_type == 9"
                class="contentItem  columnFlex allCenter"
              >
                <p class="money">{{ item.amount }}元</p>
                <p class="desc">{{ item.product_name }}</p>
              </div>
              <div
                v-if="item.is_recommend > 0"
                class="active"
              >
                <div>推荐</div>
              </div>
              <div
                v-if="item.subscript"
                class="subscript"
              >
                {{ item.subscript }}
              </div>
            </div>

          </div>
        </div>
        <!-- 复挡 -->
        <div class="template">
          <div class="subTitle">复充档位设置</div>
          <div class="contentList rowFlex flexWarp spaceBetween">
            <div
              v-for="(item,index) in data.repeat_list"
              :key="index"
              class="contentList_item"
              style="position: relative;"
            >
              <div
                v-if="item.product_type>1"
                class="contentItem contentItemActive columnFlex allCenter"
              >
                <p class="money">{{ item.amount }}/{{ item.product_name }}</p>
                <p class="desc">全场剧集免费观看</p>
              </div>
              <div
                v-else
                class="contentItem  columnFlex allCenter"
              >
                <p class="money">{{ item.amount }}元</p>
                <p class="desc">{{ `${item.coin}喵币 + ${item.free_coin}赠币` }}</p>
              </div>
              <div
                v-if="item.is_recommend > 0"
                class="active"
              >
                <div>推荐</div>
              </div>
              <div
                v-if="item.subscript"
                class="subscript"
              >
                {{ item.subscript }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  props: ['data'],
  data() {
    return {}
  },
  mounted() {
    console.log(this.data)
  },
  methods: {
    ...mapMutations('recharge', ['set_editTemplate']),
    // 编辑的时候储存当前的模版详情
    edit(item) {
      this.set_editTemplate(item)
    },
    radioChange(data) {
      this.$emit('radioChange', data)
    }
  }
}
</script>
<style lang="scss" scoped>
.contentTemplate {
  width: 767px;
  :first-child .templateList {
    .template {
      border-right: 1px solid #f1f5fd;
    }
  }

  .title {
    margin-bottom: 0;
  }
}
.template {
  padding: 20px;
  padding-top: 0;
  width: 390px;
  height: auto;
}
.auto {
  margin-right: 20px;
}
.subTitle {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  padding-top: 20px;
}

.contentList {
  position: relative;
  .contentlist_item {
    position: relative;
  }
  .active {
    position: absolute;
    top: 20px;
    left: 0;
    width: 41px;
    height: 20px;
    background: #ff7f00;
    border-radius: 8px 0px 8px 0px;
    text-align: center;
    line-height: 20px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    // color: #06c261;
  }
}
.contentItem,
.contentItemActive {
  width: 165px;
  height: 78px;
  background: #f5f6fa;
  border-radius: 8px;
  margin-top: 20px;
  .money {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
    margin: 0;
    margin-bottom: 10px;
  }
  .desc {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e47d00;
    line-height: 20px;
    margin-top: 10px;
    margin: 0;
  }
}
.subscript {
  padding: 0 5px;
  background: linear-gradient(133deg, #ff7139 0%, #fc3f3a 100%);
  border-radius: 8px 0px 8px 0px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.contentItemActive {
  // background: linear-gradient(132deg, #ffefd7 0%, #ffd099 100%);
  background-image: url(../../assets/vip_bacimage.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  .money {
    color: #624d3f;
  }
  .desc {
    color: #624d3f;
  }
}
</style>